import React from 'react';
import { observer, inject } from "mobx-react";
import { Modal, message } from 'antd';
import ProjectInfo from '../project/projectInfo';
import { styles } from './createTaskModal';

const content = {
    ...styles.content,
    padding: '10px 20px 0 20px',
}

@inject(({ projectState, userState }) => ({ projectState, userState }))
@observer
class CreateModal extends React.Component {

    state = {
        confirmLoading: false
    }

    handleOk = () => {
        const { onCancel, projectState: { saveProject } } = this.props;
        const { projectInfo } = this;
        const data = projectInfo.getValue();
        // console.log('---detail data---', data);

        let canSave = true;

        if (!data.name) {
            message.warn('请输入项目名称！', 2);
            return;
        }

        if (!data.stages.length) {
            message.warn('请添加项目阶段！', 2);
            return;
        }
        this.setState({ confirmLoading: true });

        try {
            data.stages.forEach(s => {
                const { title, phone, name, rectype, contact, members } = s.info.client[0]
                if ((data.projecttype === 1 || data.projecttype === 2) && !title) {
                    throw new Error(`${s.name}阶段的委托人身份不能为空`);
                }
                if (!name) {
                    throw new Error(`${s.name}阶段的委托人${rectype ? '姓名' : '名称'}不能为空`);
                }
                if (!phone) {
                    throw new Error(`${s.name}阶段的委托人联系电话不能为空`);
                }
                if (!rectype && !contact) {
                    throw new Error(`${s.name}阶段委托人的联系人不能为空`);
                }
                if (!members.length || !members.some(v => v.innergrouptype === 1)) {
                    throw new Error(`请在${s.name}阶段选择委托人组成员再确认保存`);
                }

            })
        } catch (e) { // 避免遍历太多，使用try catch捕捉错误的方式结束foreach循环
            message.warn(e.message, 3);
            canSave = false;
        }

        if (!canSave) {
            this.setState({ confirmLoading: false });
            return;
        }

        saveProject(data, () => {
            // 回复默认值
            this.setDefaultValue();
            this.setState({ confirmLoading: false }, onCancel);
        });

    }

    setDefaultValue = () => {
        const { projectInfo } = this;
        projectInfo.setValue({
            activeIndex: undefined,
            stages: []
        }, { name: '' });
    }

    handleCancel = () => {
        const { onCancel } = this.props;
        this.setDefaultValue();
        onCancel();
    }

    render() {
        const { show, projecttype, projectname, projectState, userState } = this.props;
        return (
            <Modal
                wrapClassName={'customizeWrapModal'}
                maskClosable={false}
                centered
                title={`新建${projectname || ''}`}
                width={700}
                visible={show}
                okText="确定"
                cancelText="取消"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                confirmLoading={this.state.confirmLoading}
            >
                <div style={content}>
                    <ProjectInfo
                        create
                        visible={show}
                        ref={d => this.projectInfo = d}
                        projecttype={projecttype}
                        projectState={projectState}
                        infoField={projectState.infoField}
                        identities={projectState.identities}
                        userState={userState}
                    />
                </div>
            </Modal>
        );
    }
}

export default CreateModal